<template>
  <div class="news">
    <div class="news-top clearfix">
      <div class="top-left">新闻动态</div>
      <div class="more">更多</div>
      <div class="model-block"></div>
    </div>
    <div class="news-content">
      <Item v-for="item in list" :key="item" :text="item"></Item>
    </div>
  </div>
</template>

<script>
import Item from "./Items";
export default {
  name: "News",
  components: {
    Item,
  },
  data() {
    return {
      list: [
        "材料成型及控制工程专业学子第十二届中国大学生铸造工艺设计大赛喜获佳绩",
        "机电工程学院赴企业检查学生实践学习情况并进行毕业答辩",
        "校领导为我院师生做党史学习教育专题报告",
        "机电工程学院在全校跳绳比赛中取得优异成绩",
        "机电工程学院组织学生党员参观井冈山精神博物馆",
        "机电工程学院“红色家书”朗诵会顺利举行",
      ],
    };
  },
};
</script>

<style lang="less">
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.news {
  width: 730px;
  float: left;
  .news-top {
    height: 54px;
    border-bottom: 1px solid #eee3f0;
    position: relative;
    line-height: 54px;
    .top-left {
      float: left;
      width: 96px;
      font-size: 24px;
    }
    .more {
      float: right;
      cursor: pointer;
      color: #084e96;
      margin-right: 8px;
      padding-right: 17px;
      background: url("../../assets/images/more.png") no-repeat 32px 23px;
    }
    .model-block {
      width: 38px;
      height: 3px;
      background: #084e96;
      position: absolute;
      z-index: 1;
      top: 52px;
    }
  }
}
</style>